<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>hi_ayu</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body {
				background: #233343;
				min-height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				perspective: 1200px;
				transform-style: preserve-3d;
			}

			.tree {
				position: relative;
				height: 50vmin;
				width: 25vmin;
				transform-style: preserve-3d;
				-webkit-animation: spin 2s infinite linear;
				animation: spin 2s infinite linear;
			}

			.tree__light {
				transform-style: preserve-3d;
				position: absolute;
				height: 1vmin;
				width: 1vmin;
				border-radius: 50%;
				-webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
				animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
				left: 50%;
				transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
				bottom: calc(var(--y, 0) * 1%);
			}

			.tree__star {
				stroke-width: 5vmin;
				stroke: #f5e0a3;
				filter: drop-shadow(0 0 2vmin #fcf1cf);
				height: 5vmin;
				width: 5vmin;
				overflow: visible !important;
				bottom: 100%;
				left: 50%;
				transform: translate(-50%, 0);
				position: absolute;
				stroke-dasharray: 1000 1000;
				fill: none;
				-webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
				animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
			}

			@-webkit-keyframes stroke {
				from {
					stroke-dashoffset: -1000;
				}
			}

			@keyframes stroke {
				from {
					stroke-dashoffset: -1000;
				}
			}

			@-webkit-keyframes spin {
				to {
					transform: rotateY(360deg);
				}
			}

			@keyframes spin {
				to {
					transform: rotateY(360deg);
				}
			}

			@-webkit-keyframes appear {
				from {
					opacity: 0;
				}
			}

			@keyframes appear {
				from {
					opacity: 0;
				}
			}

			@-webkit-keyframes flash {

				0%,
				100% {
					background: #f00;
				}

				20% {
					background: #fff;
				}

				40% {
					background: #f00;
				}

				60% {
					background: #fff;
				}

				80% {
					background: #f00;
				}
			}

			@keyframes flash {

				0%,
				100% {
					background: #f00;
				}

				20% {
					background: #fff;
				}

				40% {
					background: #f00;
				}

				60% {
					background: #fff;
				}

				80% {
					background: #f00;
				}
			}
		</style>

	</head>
	<body>
		<!-- partial:index.partial.html -->
		<div class="tree">
			<div class="tree__light"
				style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 9.42981347538814; --delay: -4.39910530364733;">
			</div>
			<div class="tree__light"
				style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 2.2091290050457; --delay: -4.607482244682255;">
			</div>
			<div class="tree__light"
				style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 8.582094417899704; --delay: -4.590468237952758;">
			</div>
			<div class="tree__light"
				style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 1.8899352771083944; --delay: -4.902732634934068;">
			</div>
			<div class="tree__light"
				style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 3.6668527882350688; --delay: -5.845446241896539;">
			</div>
			<div class="tree__light"
				style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 2.166771884146972; --delay: -2.2083516154889615;">
			</div>
			<div class="tree__light"
				style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 3.0066064141396764; --delay: -7.042556704156773;">
			</div>
			<div class="tree__light"
				style="--appear: 7; --y: 14; --rotate: 1238.4; --radius: 10.75; --speed: 2.5442322789533023; --delay: -1.1794542304808076;">
			</div>
			<div class="tree__light"
				style="--appear: 8; --y: 16; --rotate: 1209.6000000000001; --radius: 10.5; --speed: 9.4676872217504; --delay: -3.7012656902913843;">
			</div>
			<div class="tree__light"
				style="--appear: 9; --y: 18; --rotate: 1180.8; --radius: 10.25; --speed: 4.534308726646246; --delay: -2.3339331961171794;">
			</div>
			<div class="tree__light"
				style="--appear: 10; --y: 20; --rotate: 1152; --radius: 10; --speed: 9.999870882977657; --delay: -9.63158869565598;">
			</div>
			<div class="tree__light"
				style="--appear: 11; --y: 22; --rotate: 1123.2; --radius: 9.75; --speed: 4.932401735173597; --delay: -7.952649906570775;">
			</div>
			<div class="tree__light"
				style="--appear: 12; --y: 24; --rotate: 1094.4; --radius: 9.5; --speed: 7.641965702363816; --delay: -0.19778138558111946;">
			</div>
			<div class="tree__light"
				style="--appear: 13; --y: 26; --rotate: 1065.6000000000001; --radius: 9.25; --speed: 1.7791067586519538; --delay: -4.447814641871817;">
			</div>
			<div class="tree__light"
				style="--appear: 14; --y: 28; --rotate: 1036.8; --radius: 9; --speed: 0.26985449130889627; --delay: -0.49868283767234844;">
			</div>
			<div class="tree__light"
				style="--appear: 15; --y: 30; --rotate: 1008; --radius: 8.75; --speed: 7.5424668592933175; --delay: -7.460359364234488;">
			</div>
			<div class="tree__light"
				style="--appear: 16; --y: 32; --rotate: 979.2; --radius: 8.5; --speed: 4.996272325767297; --delay: -9.516133305281398;">
			</div>
			<div class="tree__light"
				style="--appear: 17; --y: 34; --rotate: 950.4; --radius: 8.25; --speed: 5.456695592915423; --delay: -7.9788526354223555;">
			</div>
			<div class="tree__light"
				style="--appear: 18; --y: 36; --rotate: 921.6; --radius: 8; --speed: 3.253082133386478; --delay: -6.954394788723343;">
			</div>
			<div class="tree__light"
				style="--appear: 19; --y: 38; --rotate: 892.8000000000001; --radius: 7.75; --speed: 7.114266564299947; --delay: -2.877030733774739;">
			</div>
			<div class="tree__light"
				style="--appear: 20; --y: 40; --rotate: 864; --radius: 7.5; --speed: 0.9733973789451622; --delay: -1.8165940036984574;">
			</div>
			<div class="tree__light"
				style="--appear: 21; --y: 42; --rotate: 835.2; --radius: 7.25; --speed: 9.546990106123838; --delay: -2.9891044943921297;">
			</div>
			<div class="tree__light"
				style="--appear: 22; --y: 44; --rotate: 806.4; --radius: 7; --speed: 5.950023088081233; --delay: -6.801843023705758;">
			</div>
			<div class="tree__light"
				style="--appear: 23; --y: 46; --rotate: 777.6; --radius: 6.75; --speed: 4.285755584817754; --delay: -2.435796250592006;">
			</div>
			<div class="tree__light"
				style="--appear: 24; --y: 48; --rotate: 748.8000000000001; --radius: 6.5; --speed: 7.241427798532625; --delay: -7.895996929603868;">
			</div>
			<div class="tree__light"
				style="--appear: 25; --y: 50; --rotate: 720; --radius: 6.25; --speed: 9.587484030979553; --delay: -6.177670515432485;">
			</div>
			<div class="tree__light"
				style="--appear: 26; --y: 52; --rotate: 691.2; --radius: 6; --speed: 0.10566641520604936; --delay: -6.013690258307194;">
			</div>
			<div class="tree__light"
				style="--appear: 27; --y: 54; --rotate: 662.4; --radius: 5.75; --speed: 9.259145810790251; --delay: -7.73169480769381;">
			</div>
			<div class="tree__light"
				style="--appear: 28; --y: 56; --rotate: 633.6; --radius: 5.5; --speed: 5.7914158545526595; --delay: -4.152156393525573;">
			</div>
			<div class="tree__light"
				style="--appear: 29; --y: 58; --rotate: 604.8000000000001; --radius: 5.25; --speed: 8.183683378336204; --delay: -4.09024933117524;">
			</div>
			<div class="tree__light"
				style="--appear: 30; --y: 60; --rotate: 576; --radius: 5; --speed: 6.199771349852425; --delay: -9.848343181027477;">
			</div>
			<div class="tree__light"
				style="--appear: 31; --y: 62; --rotate: 547.2; --radius: 4.75; --speed: 6.476648782366164; --delay: -3.452888735186075;">
			</div>
			<div class="tree__light"
				style="--appear: 32; --y: 64; --rotate: 518.4; --radius: 4.5; --speed: 8.823568952718507; --delay: -5.899425961558265;">
			</div>
			<div class="tree__light"
				style="--appear: 33; --y: 66; --rotate: 489.6; --radius: 4.25; --speed: 9.517232800140379; --delay: -8.126716262947035;">
			</div>
			<div class="tree__light"
				style="--appear: 34; --y: 68; --rotate: 460.8; --radius: 4; --speed: 1.645674749999384; --delay: -0.8084308290650966;">
			</div>
			<div class="tree__light"
				style="--appear: 35; --y: 70; --rotate: 432; --radius: 3.75; --speed: 1.4702869727724055; --delay: -6.227614500037233;">
			</div>
			<div class="tree__light"
				style="--appear: 36; --y: 72; --rotate: 403.2; --radius: 3.5; --speed: 0.9642870835017026; --delay: -9.143888269753058;">
			</div>
			<div class="tree__light"
				style="--appear: 37; --y: 74; --rotate: 374.40000000000003; --radius: 3.25; --speed: 5.7107286180554855; --delay: -1.3545028610738963;">
			</div>
			<div class="tree__light"
				style="--appear: 38; --y: 76; --rotate: 345.6; --radius: 3; --speed: 3.2087443895854006; --delay: -4.596740031357111;">
			</div>
			<div class="tree__light"
				style="--appear: 39; --y: 78; --rotate: 316.8; --radius: 2.75; --speed: 7.186140494866691; --delay: -8.987626006401852;">
			</div>
			<div class="tree__light"
				style="--appear: 40; --y: 80; --rotate: 288; --radius: 2.5; --speed: 8.305568124582027; --delay: -9.672782146763248;">
			</div>
			<div class="tree__light"
				style="--appear: 41; --y: 82; --rotate: 259.2; --radius: 2.25; --speed: 1.5101373459051493; --delay: -0.8740589364434892;">
			</div>
			<div class="tree__light"
				style="--appear: 42; --y: 84; --rotate: 230.4; --radius: 2; --speed: 1.7291773695003942; --delay: -4.894101952332628;">
			</div>
			<div class="tree__light"
				style="--appear: 43; --y: 86; --rotate: 201.6; --radius: 1.75; --speed: 7.277542256117327; --delay: -4.266728955515875;">
			</div>
			<div class="tree__light"
				style="--appear: 44; --y: 88; --rotate: 172.8; --radius: 1.5; --speed: 9.087015687632015; --delay: -1.4701814959787352;">
			</div>
			<div class="tree__light"
				style="--appear: 45; --y: 90; --rotate: 144; --radius: 1.25; --speed: 7.182626104372023; --delay: -9.242948884423914;">
			</div>
			<div class="tree__light"
				style="--appear: 46; --y: 92; --rotate: 115.2; --radius: 1; --speed: 9.45054491315452; --delay: -2.035550071989396;">
			</div>
			<div class="tree__light"
				style="--appear: 47; --y: 94; --rotate: 86.4; --radius: 0.75; --speed: 6.980570349299686; --delay: -3.452732108920755;">
			</div>
			<div class="tree__light"
				style="--appear: 48; --y: 96; --rotate: 57.6; --radius: 0.5; --speed: 1.8878374738479176; --delay: -8.055465994685548;">
			</div>
			<div class="tree__light"
				style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 5.30886945089428; --delay: -0.4387918250716849;">
			</div>
			<svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" style="--delay: 50">
				<path
					d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z"
					fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
			</svg>
		</div>
		<!-- partial -->

	</body>
</html>
